<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">日期范围：</span>
                <el-date-picker
                    v-model="area_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__item">
                <span class="task-one__label">会员UID：</span>
                <el-input placeholder="输入会员UID" v-model.trim="user_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">会员姓名：</span>
                <el-input placeholder="输入会员姓名" v-model.trim="user_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">手机号码：</span>
                <el-input placeholder="输入手机号" v-model.trim="tel" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">支付方式：</span>
                <el-select v-model="pay_type" clearable placeholder="请选择支付方式">
                    <el-option label="微信支付" value="wxpay" />
                    <el-option label="余额支付" value="money" />
                    <el-option label="授信额度支付" value="credit" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">付款来源：</span>
                <el-select v-model="from_pay" clearable placeholder="请选择付款来源">
                    <el-option label="鲜花订单" value="flower" />
                    <el-option label="欠款明细" value="debt" />
                    <el-option label="余额充值" value="money" />
                </el-select>
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button @click="clickExport">导出</el-button>
            </div>
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column label="昵称/ID" min-width="140">
                <template #default="{ row }">
                    <p class="line-one">{{ row.nickname }}</p>
                    <p>UID：{{ row.uid }}</p>
                </template>
            </el-table-column>
            <el-table-column label="姓名/电话" min-width="120">
                <template #default="{ row }">
                    <p class="line-one">{{ row.name }}</p>
                    <p>{{ row.mobile }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="trade_no" label="商户订单号" min-width="120"></el-table-column>
            <el-table-column prop="amount" label="支付金额(元)" min-width="120"></el-table-column>
            <el-table-column label="支付方式" min-width="170">
                <template #default="{ row }">
                    <div style="color: #4b93fa" v-if="row.payment === 'wxpay' || row.payment === 'allinpay'">
                        <div>{{ row.payment === "wxpay" ? "微信支付" : "通联支付" }}</div>
                        <div>订单号:{{ row.transaction_id }}</div>
                    </div>

                    <span style="color: #4b93fa" v-else>{{ row.payment === "money" ? "余额支付" : "授信额支付" }}</span>
                </template>
            </el-table-column>
            <el-table-column label="付款来源" min-width="120">
                <template #default="{ row }">
                    <span style="color: #4b93fa" v-if="row.from === 'flower'">鲜花订单</span>
                    <span style="color: #4b93fa" v-else>{{ row.from === "debt" ? "欠款明细" : "余额充值" }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="payed_time_label" label="支付时间" width="160"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { Search } from "@element-plus/icons-vue"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        uid: user_id.value,
        name: user_name.value,
        payment: pay_type.value,
        from: from_pay.value,
        mobile: tel.value,
        s_time: area_time.value ? area_time.value[0] : "",
        l_time: area_time.value ? area_time.value[1] : "",
    }
    getdata("finance/paymentLog", params)
}

/**
 * 搜索
 * @param {String} user_name 会员名称
 * @param {String} user_id 会员ID
 * @param {String} area_time 注册时间段
 * @param {String} tel 手机号
 * @param {String} pay_type 支付接口[wxpay:微信支付,money:余额支付,credit:授信额]
 * @param {String} from_pay 付款来源[flower:鲜花订单,debt:欠款明细,money:余额充值]
 */
const user_name = ref("")
const user_id = ref("")
const area_time = ref("")
const tel = ref("")
const pay_type = ref("")
const from_pay = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

// 导出
const clickExport = () => {
    proxy.$axios
        .get("finance/paymentLogExport", {
            params: {
                uid: user_id.value,
                name: user_name.value,
                payment: pay_type.value,
                from: from_pay.value,
                mobile: tel.value,
                s_time: area_time.value ? area_time.value[0] : "",
                l_time: area_time.value ? area_time.value[1] : "",
            },
            responseType: "blob",
        })
        .then(function (res) {
            let contentDisposition = res.headers["content-disposition"]
            let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1])
            let blob = new Blob([res.data], { type: res.headers["content-type"] })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")
            link.href = url
            link.download = filename
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(url) // 释放内存
            document.body.removeChild(link)
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "CollectionDetail",
}
</script>

<style lang="less" scoped></style>
